<template>
  <div class="box">
    <div class="container">
      <div class="frombox">
        <div class="lf-img">
          <div class="logo">
            <img src="../assets/img/s5cbfcff8dc0f0.png" alt="" />
          </div>
        </div>
        <div class="rg-login">
          <div>
            <h2>管理员登录</h2>
          </div>
          <div class="loginbox">
            <el-form :model="form" ref="form" :rules="rules">
              <el-form-item label="" prop="uname"
                ><el-input
                  v-model="form.uname"
                  prop="uname"
                  :maxlength="8"
                  placeholder="请输入管理员用户账号"
                  clearable
                  suffix-icon="el-icon-user"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="upwd">
                <el-input
                  v-model="form.upwd"
                  placeholder="请输入密码"
                  type="password"
                  :maxlength="12"
                  clearable
                  prop="upwd"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="ucode">
                <el-row type="flex" justify="space-between">
                  <el-col :span="13">
                    <el-input
                      v-model="form.ucode"
                      placeholder="请输入验证码"
                      maxlength="4"
                    ></el-input>
                  </el-col>
                  <el-col :span="10"
                    ><span class="svg" ref="svg" @click="reucode"></span
                  ></el-col>
                </el-row>
              </el-form-item>

              <el-button type="danger" class="btn" @click="login('form')"
                >登录</el-button
              >
            </el-form>
            <div class="qtlogin">
              <span></span> <router-link to="">其他登录方式</router-link>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { LoginVerification } from "../api";
import { Gettoken } from "../api";
import { Verifytoken } from "../api";
export default {
  data() {
    return {
      form: {
        uname: "",
        upwd: "",
        ucode: "",
      },

      time: null,
      rules: {
        uname: [
          { required: true, message: "请输入管理员账户", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        upwd: [
          { required: true, message: "请输管理员用户密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        ucode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            message: "验证码长度为4",
            min: 4,
            max: 4,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.gettokens();
    this.verifytokens();
  },
  methods: {
    async adminLogin() {
      let params = { uname: this.form.uname, upwd: this.form.upwd };
      const data = await LoginVerification(params);
      const { code } = data.data;
      const { id } = data.data.data[0];
      let a = code == 201 ? Message.error("用户密码或账号错误") : Message.success("账号密码验证成功"); //登陆验证
      if(a)
      {
        return
      }
    },
    verify() {
      let ucode = this.form.ucode;
      const config = {
        headers: { authorition: localStorage.getItem("token")},
      };
      this.axios
        .get(`http://localhost:3000/login/verifyucode?ucode=${ucode.toLowerCase()}`, config)
        .then((res) => {
          console.log(res);
          let { code } = res.data;
          if (code == 201) {
            Message.error("验证码输入错误!请重试");
            return;
          }
          this.$router.push("/managementsystem");
        });
      console.log(config);
    },
    login(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          this.adminLogin();
           this.verify(); 
          this.form.uname = ""; // 清空文本
          this.form.upwd = ""; // 清空文本
           this.form.ucode= ""; // 清空文本
           this.verifytokens();
        }
      });
    },
    reucode() {
      if (this.time) return;
      this.time = setTimeout(() => {
        this.time = null;
      }, 1000);
      this.verifytokens();
    },
    async gettokens() {
      const token = await Gettoken();
      window.localStorage.setItem("token", token.data.token);
      // console.log(token);
    },
    verifytokens() {
      const config = {
        headers: { authorition: localStorage.getItem("token") },
      };
      console.log(localStorage.getItem("token"));
      this.axios
        .get("http://localhost:3000/login/verifytoken", config)
        .then((res) => {
          console.log(res);
          let ucode = res.data.ucode;
          this.$refs.svg.innerHTML = ucode;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.svg {
  display: inline-block;
  height: 40px;
  width: 120px;
  & > svg {
    height: 40px !important;
    width: 120px !important;
  }
}
a {
  color: #000;
  text-decoration: none;
}
.qtlogin {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  > span {
    display: inline-block;
    width: 100px;
    border-top: 1px solid #ddd;
  }
  a {
    margin-left: 8px;
    margin-right: 8px;
    font-size: 14px;
    color: #005980;
  }
}
.box {
  width: 100vw;
  height: 100vh;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/img/s5cbfcdf574724.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.btn {
  background-color: #c71d23;
  width: 100%;
}
.frombox {
  display: flex;
  width: 600px;
  height: 400px;
  .rg-login {
    background-color: #fff;
    width: 420px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    .loginbox {
      margin: auto;
      .el-form > .el-input {
        margin-bottom: 15px;
      }
      width: 300px;
    }
  }
  .lf-img {
    flex: 1 1 1;
    width: 180px;
    height: 100%;
    background-image: url(../assets/img/dzbsy4-1.jpg);
    background-color: rgba(#000, 0.7);
  }
  .logo {
    width: 100%;
    height: 168px;
    margin-top: 80px;
    img {
      width: 100%;
    }
  }
}
</style>